/**
 * Suite Human Talent
 * @class Extmx.ItemSelectorView
 * <br><br>
 *
 * @extends Ext.ux.form.ItemSelector
        * @autor Ing. Jose Armando Gonz�lez L�pez<br>
 *        ceo@extjs.mx<br>
 *        manduks
 * @fecha Dec 8, 2010. DF
 * @license GPL
 */

Ext.ns('Extmx.ItemSelectorView');

Extmx.ItemSelectorView = Ext.extend(Ext.ux.form.ItemSelector,{

    drawUpIcon:false,
    drawDownIcon:false,
    drawTopIcon:false,
    drawBotIcon:false,
    frame:true,
    initComponent:function(){
        var config_ini ={
            imagePath: 'js/ext/ux/images/',
            multiselects:this.buildMultiSelects()
        };
       Ext.apply(this,config_ini);
       Extmx.ItemSelectorView.superclass.initComponent.call(this);
    },
    buildMultiSelects:function(){
        return [{
                width: 390,
                height: 320,
                store: this.buildStore(),
                displayField: this.displayField,
                valueField: this.valueField,
                descField:this.descField,
                tbar:this.buildTbarL(),
                bbar:this.buildBbarL(this.storeL)
            },{
                width: 390,
                height: 320,
                displayField: this.displayField,
                valueField: this.valueField,
                descField:this.descField,
                store: this.buildStore2(),
                tbar:this.buildTbarR(),
                bbar:this.buildBbarR(this.storeR)
            }]
    },
    buildTbarL:function(){
        this.checkL = new Ext.form.Checkbox({
            listeners:{
                scope:this,
                check:this.alCheckL
            }
        });
        return [this.checkL,'-','<span style="color:#15428B; font:bold 11px tahoma,arial,verdana,sans-serif;">'
							+this.legendL+' </span>'];  
    },
    buildTbarR:function(){
         this.checkR = new Ext.form.Checkbox({
            listeners:{
                scope:this,
                check:this.alCheckR
            }
        });
        return [this.checkR,'-','<span style="color:#15428B; font:bold 11px tahoma,arial,verdana,sans-serif;">'
							+this.legendR+' </span>'];
    },
    alCheckL:function(chk,b){
         if(b){
             this.fromMultiselect.view.selectRange(0,this.storeL.getCount());
        }else{
             this.fromMultiselect.view.clearSelections(true);
        }
    },
    alCheckR:function(chk,b){
         if(b){
            this.toMultiselect.view.selectRange(0,this.storeR.getCount());
        }else{
            this.toMultiselect.view.clearSelections(true);
        }        
    },
    buildBbarL:function(){
      return undefined;  
    },
    buildBbarR:function(){
      return undefined;  
    },
    clearSelected:function(){
        this.getForm().findField('itemselector').reset();
    },
    buildStore:function(){
        return undefined;
    },
    buscarNodo:function(){

    },
    borrarFiltro:function(){},
    alKeyup:function(){},
    onRender: function(ct, position){
        Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);

        // Internal default configuration for both multiselects
        var msConfig = [{
            legend: '',
            draggable: true,
            droppable: true,
            width: 100,
            height: 100
        },{
            legend: '',
            droppable: true,
            draggable: true,
            width: 100,
            height: 100
        }];

        this.fromMultiselect = new Extmx.MultiSelectView (Ext.applyIf(this.multiselects[0], msConfig[0]));
        this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
        this.fromMultiselect.on('click', this.onFromViewClick, this);

        this.toMultiselect = new Extmx.MultiSelectView (Ext.applyIf(this.multiselects[1], msConfig[1]));
        this.toMultiselect.markInvalid('Faltan valores');
        this.toMultiselect.store.on('add',function(){this.toMultiselect.clearInvalid('Faltan valores');},this);
        this.toMultiselect.on('dblclick', this.onRowDblClick, this);
        this.toMultiselect.on('click', this.onToViewClick, this);

        var p = new Ext.Panel({
            bodyStyle:this.bodyStyle,
            border:this.border,
            layout:"column",
            layoutConfig:{columns:3}
        });

        p.add(this.fromMultiselect);
        var icons = new Ext.Panel({header:false});
        p.add(icons);
        p.add(this.toMultiselect);
        p.render(this.el);
        icons.el.down('.'+icons.bwrapCls).remove();

        // ICON HELL!!!
        if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
            this.imagePath+="/";
        this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
        this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
        this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
        this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
        this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
        this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
        var el=icons.getEl();
        this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
        this.toTopIcon.on('click', this.toTop, this);
        this.upIcon.on('click', this.up, this);
        this.downIcon.on('click', this.down, this);
        this.toBottomIcon.on('click', this.toBottom, this);
        this.addIcon.on('click', this.fromTo, this);
        this.removeIcon.on('click', this.toFrom, this);
        if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
        if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
        if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
        if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
        if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
        if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }

        var tb = p.body.first();
        this.el.setWidth(p.body.first().getWidth());
        p.body.removeClass();

        this.hiddenName = this.name;
        var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
        this.hiddenField = this.el.createChild(hiddenTag);
    },
    onFromViewClick:function(){
        this.checkL.reset();
    },
    onToViewClick:function(){
        this.checkR.reset();
    }
});